<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单确认</title>
</head>
<style>
    h2 {
        text-align: center;
    }

    table, th, td {
        /*border:边框 solid:无缝隙的*/
        border: 1px solid #000;
    }

    table {
        /*collapse 倒塌，塌下；崩溃，瓦解；突然倒下，昏倒；瘫倒；突然贬值，暴跌；萎陷，瘪掉；折叠*/
        border-collapse: collapse;
        height: 80px;
        /*margin 边缘，非主体部分*/
        margin: 0 auto;
        /*align 排成一条直线，使平行*/
        text-align: center;
    }

</style>
<body>
<h2>订单确认</h2>


<script>
    let number = +prompt('请输入购买数量：')
    let address = prompt('请输入收货位置：')
    let price = number * 18
    document.write(`
        <table>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th>收货地址</th>
            </tr>
            <tr>
                <td>狼牙薯条 </td>
                <td>18元</td>
                <td>${number}</td>
                <td>${price}</td>
                <td>${address}</td>
            </tr>
        </table>
    `)
</script>
</body>
</html>